<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.69.0" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>七牛云存储 &middot; 宋申奥的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0f ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/hugo_blog/"><h1>宋申奥的博客</h1></a>
      <p class="lead">
       这里是宋申奥的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/hugo_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>七牛云存储</h1>
  <time datetime=2020-04-30T10:26:35Z class="post-date">Thu, Apr 30, 2020</time>
  <h1 id="七牛云存储">七牛云存储</h1>
<h2 id="安装七牛云控件">安装七牛云控件</h2>
<p>pip install qiniu</p>
<h2 id="django接口获取token">django接口获取token</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#75715e">#七牛云</span>
<span style="color:#f92672">from</span> qiniu <span style="color:#f92672">import</span> Auth

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Qiniu</span>(APIView):
    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">get</span>(self,request):
        <span style="color:#75715e">#声明认证对象 参数（ak,sk）</span>
        q <span style="color:#f92672">=</span> Auth(<span style="color:#e6db74">&#39;lSHiV0YqwAZwm-benIiATiafSQ4-y63Zg1TLmXg3&#39;</span>,<span style="color:#e6db74">&#39;KFZy2dDBwOEHIU2Qmb1v6Kx4C2zvILxkMNDpI057&#39;</span>)
        <span style="color:#75715e">#获取token</span>
        token <span style="color:#f92672">=</span> q<span style="color:#f92672">.</span>upload_token(<span style="color:#e6db74">&#39;md-admin&#39;</span>)
        <span style="color:#66d9ef">return</span> Response({<span style="color:#e6db74">&#39;code&#39;</span>:<span style="color:#ae81ff">200</span>,<span style="color:#e6db74">&#39;token&#39;</span>:token})
</code></pre></div><hr>
<h2 id="vue接口请求图片上传">vue接口请求图片上传</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">template</span>&gt;
  &lt;<span style="color:#f92672">div</span>&gt;
    &lt;<span style="color:#f92672">table</span>&gt;
        &lt;<span style="color:#f92672">tr</span>&gt;
            &lt;<span style="color:#f92672">td</span>&gt;
                <span style="color:#a6e22e">七牛用户头像</span><span style="color:#960050;background-color:#1e0010">：</span>
            &lt;/<span style="color:#f92672">td</span>&gt;
            &lt;<span style="color:#f92672">td</span>&gt;
                &lt;<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;file&#34;</span> <span style="color:#f92672">@change</span><span style="color:#e6db74">=&#34;qiniu&#34;</span>&gt;
            &lt;/<span style="color:#f92672">td</span>&gt;
        &lt;/<span style="color:#f92672">tr</span>&gt;
    &lt;/<span style="color:#f92672">table</span>&gt;
  &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;

&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">data</span> () {
        <span style="color:#66d9ef">return</span> {
            <span style="color:#a6e22e">msg</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;这是一个变量&#34;</span>,
            <span style="color:#a6e22e">src</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>,
            <span style="color:#75715e">//七牛
</span><span style="color:#75715e"></span>            <span style="color:#a6e22e">token</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>,
        }
    },
    <span style="color:#75715e">//钩子函数
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">mounted</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
        <span style="color:#75715e">//获取token
</span><span style="color:#75715e"></span>        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">get_token</span>();
        },
    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
        <span style="color:#a6e22e">get_token</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#39;http://127.0.0.1:8000/qiniu/&#39;</span>).<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">res</span>=&gt;{           
                    <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">res</span>)
                    <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">token</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">token</span>
                    <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">token</span>)
            })
        },
        <span style="color:#75715e">//七牛上传
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">qiniu</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">e</span>){
            <span style="color:#75715e">//获取文件
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">file</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">target</span>.<span style="color:#a6e22e">files</span>[<span style="color:#ae81ff">0</span>];
            <span style="color:#75715e">//声明表单
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">param</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">FormData</span>()    
            <span style="color:#a6e22e">param</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;file&#39;</span>,<span style="color:#a6e22e">file</span>,<span style="color:#a6e22e">file</span>.<span style="color:#a6e22e">name</span>)
            <span style="color:#a6e22e">param</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;token&#39;</span>,<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">token</span>)   
            <span style="color:#75715e">//自定义zxios
</span><span style="color:#75715e"></span>            <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axios_qiniu</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">create</span>({<span style="color:#a6e22e">withCredentials</span><span style="color:#f92672">:</span><span style="color:#66d9ef">false</span>})

            <span style="color:#75715e">//发送请求
</span><span style="color:#75715e"></span>            <span style="color:#a6e22e">axios_qiniu</span>({
                <span style="color:#a6e22e">method</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;POST&#39;</span>,
                <span style="color:#a6e22e">url</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;http://up-z1.qiniu.com&#39;</span>,
                <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span><span style="color:#a6e22e">param</span>,
                <span style="color:#a6e22e">timeout</span><span style="color:#f92672">:</span><span style="color:#ae81ff">30000</span>
            }).<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">res</span>=&gt;{
                <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">res</span>)
            })

        },
    }
}
&lt;/<span style="color:#f92672">script</span>&gt;
</code></pre></div>
</div>


    </main>

    
  </body>
</html>
